<template>
  <!-- 防艾资讯 -->
  <div class="messageDetail">
    <MyHead title="防艾资讯" style="background: #f8f8f8; height: 30px"></MyHead>
    <div class="bg-img pb2">
      <div class="box">
        <div class="top-box">
          <div class="title">{{ messageInfo.title }}</div>
          <div class="time-unit">
            <div v-if="messageInfo.create_time">
              发布时间：{{ messageInfo.create_time }}
            </div>
            <div v-if="messageInfo.depart_name" class="unit">
              发布单位：{{ messageInfo.depart_name }}
            </div>
          </div>
        </div>
        <div class="introduce-box" v-html="messageInfo.content"></div>
        <div class="video-box" v-if="messageInfo.video_url">
          <video
            :src="sourceURL + messageInfo.video_url"
            width="95%"
            height="100%"
            controls="controls"
            autoplay="autoplay"
          >
            <source :src="sourceURL + messageInfo.video_url" type="video/mp4" />
          </video>
        </div>
        <div v-if="messageInfo.link_url" class="statement">
          <div>
            友情链接：
            <a :href="messageInfo.link_url">{{ messageInfo.link_url }} </a>
          </div>
        </div>
        <div class="btn-box flexc">
          <van-button
            round
            type="info"
            v-if="messageInfo.related_id != '0'"
            @click="goJoin"
            >立即参与</van-button
          >
        </div>
        <div class="statement" v-if="messageInfo.is_duty == 1">
          <div class="title">版权说明:</div>
          <div class="information">
            文章中内容、图片、视频用于防艾 宣传，如有侵权，请联系删除。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { sourceURL } from "../../api/request";
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      id: "",
      messageInfo: {},
      q: "", //关联的活动id
    };
  },
  computed: {},
  methods: {
    /*立即参与 */
    goJoin() {
      this.$router.push({ name: "provincialmap", query: { q: this.q } });
    },
    /*详情*/
    async informationdetail() {
      let res = await this.$ajax.getinformationdetail({
        openid: this.openid,
        id: this.id,
      });
      if (res.code == 1) {
        this.messageInfo = res.data;
        if (res.data.related_id != "0") {
          this.q = res.data.related_id;
        }
      }
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.informationdetail();
  },
};
</script>
  
<style lang="scss" >
p {
  padding: 0;
  margin: 0;
}

.messageDetail {
  background-color: #f8f8f8;

  .bg-img {
    background: url("../../assets/images/afzx-bg.jpg") no-repeat;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    padding-top: 20px;
    min-height: 100vh;
    height: 100%;
  }
  .box {
    box-sizing: border-box;
    width: 95%;
    margin: 0 auto;

    border-radius: 20px;
    background: #ffffff6e;
    padding-bottom: 20px;
  }
  .top-box {
    border-bottom: 1px solid #bbbbbb;
    padding: 10px;
    line-height: 30px;
    margin: 18px;

    .title {
      color: rgba(16, 16, 16, 1);
      font-size: 20px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      font-weight: 550;
    }

    .time-unit {
      display: flex;
      flex-wrap: wrap;
      color: rgba(153, 153, 153, 1);
      font-size: 14px;
      text-align: left;
      font-family: SourceHanSansSC-regular;

      .unit {
        
      }
    }
  }

  .introduce-box {
    box-sizing: border-box;
    padding: 20px;
    line-height: 25px;
    text-indent: 28px;
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    text-align: left;
    font-family: PingFangSC-regular;
    font-weight: bold;
    background: none !important;

    p {
      background: transparent !important;
    }
    img {
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
      background: none;
    }
    section {
      background: none !important;
    }
    strong {
      background: none !important;
    }
  }

  .video-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    height: 250px;
  }

  .btn-box {
    margin-top: 20px;

    .van-button {
      width: 135px;
      height: 40px;
      border-radius: 37px;
      background-color: rgba(226, 27, 27, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      text-align: center;
      font-family: Microsoft Yahei;
      border: none;
    }
  }
  .statement {
    padding: 10px;
    line-height: 28px;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    .information {
      color: #666666;
      font-size: 14px;
    }
  }
}
</style>